<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>check print</title>
	<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-css/css/bootstrap.css">
	<script src="/vendor/mootools/dist/mootools-core.js"></script>
	<style>
		.item {
			width: 300px;
			height: 200px;
			margin-top: 30px;
			margin-left: 10px;
			float:left;
		}
		.item img {
			height: 100%;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
	</style>
</head>
<body>
	<header>
		<h1 class="text-center">Wephoto Printing Check</h1>
	</header>
	<div class="container">
		<div class="row">
			<input class="form-control" id="eventId" type="text" placeholder="Input event id and enter">
		</div>
		<div class="row clearfix">
			<ul class="items " style="list-style:none;">

			</ul>
		</div>
	</div>
	<script type="text/javascript">
		$('eventId').addEvent('keydown', function(e){
			if(e.key === 'enter'){
				var eventId = $(this).get('value').trim();
				var onsuccess = function(d){
					if(d.length > 0){
						var html = '';
						d.forEach(function(p){
							var t = new Date();
							t.setTime(p.timestamp);
							var time = t.toLocaleDateString() + " " + t.toLocaleTimeString();
							html += '<li class="item"><a target="_blank" href="' + p.filename + '"><img src="' + p.filename + '"></a><p class="text-center"> time: ' + time + '</p></li>'; 
						});
						document.getElement('.items').set('html',html);
					}else{
						document.getElement('.items').set('html', '<p>还没有打印过照片呢！</p>');
					}
				}
				eventId = Number.from(eventId);
				if(!eventId)
					return
				new Request.JSON({
					'url': '/printlist/' + eventId,
					'onSuccess': onsuccess
				}).get();
			}
		});
	</script>
</body>
</html>